<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>图像二值化调节</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      display: flex;
      flex-direction: row;
      height: 100vh;
    }
    .video-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #222;
    }
    .video-container img {
      max-width: 100%;
      max-height: 49%;
      margin: 1%;
      border: 2px solid #ccc;
    }
    .control-panel {
      width: 300px;
      padding: 20px;
      background-color: #f2f2f2;
      box-shadow: -2px 0 5px rgba(0,0,0,0.2);
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    input[type=range] {
      width: 100%;
    }
    select, button {
      padding: 8px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="video-container">
    <img id="original" src="/video?type=original" alt="原始图像">
    <img id="binary" src="/video?type=binary" alt="二值化图像">
  </div>
  <div class="control-panel">
    <label>选择阈值组：</label>
    <select id="groupSelect"></select>

    <label>最小阈值: <span id="lowerVal">0</span></label>
    <input type="range" id="lower" min="0" max="255" value="0">

    <label>最大阈值: <span id="upperVal">255</span></label>
    <input type="range" id="upper" min="0" max="255" value="255">

    <button onclick="saveCurrentGroup()">保存当前组</button>
    <button onclick="saveAllGroups()">保存所有组</button>
    <button onclick="exitServer()">一键退出</button>
  </div>

  <script>
    let config = {};
    let currentGroup = "";

    async function fetchConfig() {
      const res = await fetch("/config");
      config = await res.json();
      const select = document.getElementById("groupSelect");
      select.innerHTML = "";
      for (const group in config) {
        const option = document.createElement("option");
        option.value = group;
        option.textContent = group;
        select.appendChild(option);
      }
      if (Object.keys(config).length > 0) {
        select.value = Object.keys(config)[0];
        loadGroup(select.value);
      }
    }

    function loadGroup(group) {
      currentGroup = group;
      const data = config[group];
      document.getElementById("lower").value = data.lower;
      document.getElementById("upper").value = data.upper;
      document.getElementById("lowerVal").textContent = data.lower;
      document.getElementById("upperVal").textContent = data.upper;
    }

    function updateRange() {
      const lower = parseInt(document.getElementById("lower").value);
      const upper = parseInt(document.getElementById("upper").value);
      document.getElementById("lowerVal").textContent = lower;
      document.getElementById("upperVal").textContent = upper;
      config[currentGroup] = { lower, upper };
    }

    function saveCurrentGroup() {
      fetch("/save_current", {
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ group: currentGroup, data: config[currentGroup] })
      });
    }

    function saveAllGroups() {
      fetch("/save_all", {
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(config)
      });
    }

    function exitServer() {
      fetch("/exit", { method: "POST" });
    }

    document.getElementById("lower").addEventListener("input", updateRange);
    document.getElementById("upper").addEventListener("input", updateRange);
    document.getElementById("groupSelect").addEventListener("change", (e) => loadGroup(e.target.value));

    fetchConfig();
  </script>
</body>
</html>
